<script lang="ts" setup>
import {ref} from "vue";
import {useResourceStore} from "../../store/ResourceStore.ts";
import {Timestamp} from "../../network/types/Timestamp.ts";
import type {IndexForumCategory} from "../../network/types/Resources.ts";
import IndexForumEntrance from "../../components/entrance/IndexForumEntrance.vue";

const resourceStore = useResourceStore();

const categories = ref<IndexForumCategory[]>()
const version = ref<Timestamp>()

resourceStore.indexForums().then(res => {
  categories.value = res.categories
  version.value = res.time

  console.log(res.categories)
})


</script>

<template>
  <div>
    <el-container>
      <el-main>
        <el-tabs>
          <el-tab-pane v-for="category in categories" :label="category.name || category.nameEn" lazy>
            <el-tabs>
              <el-tab-pane v-for="(group,index) in category.groups" :label="group.name ||`分组${index}`" lazy>
                <el-row>
                  <el-col v-for="item in group.forums" :span="6" style="text-align: start">
                    <index-forum-entrance :data="item"/>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
        <span v-if="version">版本: {{ version.full }}</span>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>

</style>